<template>
  <div class="songtablelist">
    <!-- <input v-model="musicId" name="" value="" class="" /> -->
    <!-- <button @click="add">click</button> -->
    <div class="box clearfix">
      <img class="infoimg" :src="songtable.imgUrl" alt="" srcset="" />
      <div class="fr">
        <div class="name">歌曲名称：{{ songtable.songsheetName }}</div>
        <div class="user">创建者：{{ songtable.userId }}</div>
        <div class="create">创建时间：{{ songtable.createTime }}</div>
      </div>
    </div>
    <button @click="addsong">添加</button>
    <div class="addbox">
      <el-input v-model="input" placeholder="搜索歌手或歌名"></el-input>

      <span @click="search()" class="iconfont icon-sousuo"></span>
      <ul>
        <li v-for="(item, index) in song" :key="index">
          <i>{{ item.musicName }}</i>
          <i>{{ item.singer.singerName }}</i>
        </li>
      </ul>
    </div>
    <el-button type="danger" icon="el-icon-back" @click="back()" class="back"
      >返回歌单</el-button
    >
    <el-table
      :data="
        songtablelist.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )
      "
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column prop="" label="序号" width="80">
        <template slot-scope="scope">
          {{ pagesize * (currentPage - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="" label="图片" width="180">
        <template slot-scope="scope">
          <!-- {{ scope.$index + 1 }}
          {{ scope.row.id }} -->
          <img :src="scope.row.imgUrl" alt="" width="60px" height="60px" />
          <!-- <img :src="{ { scope.row.imgUrl } }" alt="" srcset="" /> -->
        </template>
      </el-table-column>

      <el-table-column prop="musicName" label="歌曲名称" width="180">
      </el-table-column>
      <!-- <el-table-column prop="role" label="角色"> </el-table-column> -->
      <el-table-column prop="singer.singerName" label="歌手" width="180px">
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4, 5]"
      :page-size="pagesize"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      // 每页数据
      pagesize: 2,
      totalCount: 0,
      input: "",
      region: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      //初始页
      currentPage: 1,
      // 每页数据
      pagesize: 5,
      totalCount: 0,
      musicId: 0,
      songtable: [],
      songtablelist: [],
      input: "",
      song: [],
    };
  },
  methods: {
    // 每页显示几条
    handleSizeChange(val) {
      this.pagesize = val;
      //   this.getPackData(); //根据用户获取的每页显示页面数量显示页面
    },
    // 操作当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(val);
      // this.getPackData();//获取用户点击的当前页后刷新页面数据
    },
    handleDelete(index, row) {
      // this.songtablelist.splice(
      //   this.pagesize * (this.currentPage - 1) + index,
      //   1
      // );
      console.log(row);
      console.log(this.$route.query.id);
      this.$axios.post(
        `api/songSheet/removeMusicBySongSheet?musicId=${row}&songSheetId=${this.$route.query.id}`
      );
    },
    add() {
      this.$axios.post(
        `api/songSheet/addMusicToSongSheet?musicId=${this.musicId}&songSheetId=${this.$route.query.id}`
      );
    },
    // 搜索
    search() {
      this.$axios
        .get(`api/music/searchMusic?keyWord=${this.input}`)
        .then((res) => {
          console.log(res.data.data);
          this.song = res.data.data;
        });
    },
    // 添加歌曲
    addsong() {
      this.$axios
        .post("api/songSheet/addMusicToSongSheet?musicId=37&songSheetId=6")
        .then((res) => {
          console.log(res.data);
        });
    },
    back() {
      this.$router.push("/songtable");
    },
  },
  mounted() {
    console.log(Number(this.$route.query.id));
    this.$axios
      .get("api/songSheet/getSongSheetById", {
        params: {
          id: Number(this.$route.query.id),
        },
      })
      .then((res) => {
        console.log(res.data.data);

        if (res.data.data.imgUrl != "") {
          res.data.data.imgUrl =
            "http://192.168.0.26:8081" + res.data.data.imgUrl;
        }
        console.log(res.data.data.imgUrl);
        this.songtable = res.data.data;
        console.log(this.songtable.imgUrl);
        this.songtablelist = res.data.data.music;
        this.totalCount = this.songtablelist.length;
      });
  },
};
</script>
<style scoped>
.songtablelist {
  margin: 20px 20px;
  border-radius: 5px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: white;
}
.box {
  text-align: left;
}
.clearfix::after {
  content: "";
  display: block;
  overflow: hidden;
}
.infoimg {
  width: 100px;
  height: 100px;
  float: left;
}
.fr {
  float: left;
  margin-left: 20px;
}
.name {
  /* margin-top: 10px; */
}
.user {
  margin-top: 20px;
}
.create {
  margin-top: 19px;
}
.addbox {
  display: flex;
  align-content: space-around;
  margin: 10px 10px 20px 10px;
  width: 300px;
}
.searchbox {
  margin: 20px;
  display: flex;
  align-content: space-around;
  width: 300px;
}
span {
  display: block;
  background: skyblue;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}
.back {
  display: inline-block;
  float: right;
  margin-top: -40px;
  margin-right: 100px;
}
ul {
  position: absolute;
  text-align: left;
  left: 389px;
  top: 126px;
  z-index: 1000;
  background-color: #f4f4f4;
}
li {
  width: 247px;
  padding: 5px 0;
}
</style>